<!--  -->
<template>
  <div>采购申请

    <el-button type="primary" @click="add">添加
      
    </el-button>
   
  <ETable ref="table" v-bind="tableConifg">


    <template #search="{params,search}">

 
  
       
<el-form :inline="true"  class="demo-form-inline">
 

<el-form-item label="期待到货日期">
    <el-date-picker
    value-format="YYYY-MM-DD"
    @change="(val:string[])=>dateChange(val,params,search)"
        v-model="value1"
        type="daterange"
        clearable
        range-separator="To"
        start-placeholder="Start date"
        end-placeholder="End date"
      />
</el-form-item>

<el-form-item>
    <el-select
    @change="search"
      v-model="params.state"
      placeholder="Select"
      clearable
      style="width: 240px"
    >
      <el-option
        v-for="item in stateOptions"
        :key="item"
        :label="item"
        :value="item"
      />
    </el-select>
</el-form-item>

 
<el-form-item>
<el-button type="primary" @click="search">搜索</el-button>
</el-form-item>
</el-form>
</template>

   
    <template #operation="{ row,del }">
        <el-button link type="primary">修改</el-button>
        <el-button link type="danger" @click="del(row.id)">删除</el-button>
     </template>
  </ETable>


  </div>
</template>

<script lang='ts' setup>
import { reactive,toRefs,ref,onMounted} from 'vue'
import ETable, { TableType } from '../../components/ETable.vue';
import { getPurchases } from '../../apis/purchase/purchase';
import { columns } from './columns';

const stateOptions=ref(['待提交','已经发货']);

const table=ref();


const add = () => {
  // table.value.title="您好";

    table.value.addReload();
  //   console.log('add');
}

const dateChange = (val:string[],params:any,fn:()=>void) => {
    console.log(val);
    console.log(params);

    if(val){
        params.beginDate=val[0];
        params.endDate=val[1];
    }
    else{
        params.beginDate=null;
        params.endDate=null;
    }

    fn();
    
}

const value1 = ref('')
const tableConifg:TableType = {
    loadData:getPurchases,
    columns
}
</script>
<style scoped>
</style>